import $ from '../jquery-3.4.1.min.js';
import ajax from '../utils/ajax.js';
//默认全局搜索
const searchData = {
    value: ""
}
let {
    nowPage,//当前页面
    pageSize,//当前页面显示多少条数据
    total,//总共多少数据
    pages,//总共页数
    nowPageSize//当前页面实际多少数据
} = {
    nowPage: 1,//当前页面
    pageSize: 3,//当前页面显示多少条数据
    total: 0,//总共多少数据
    pages: 0,//总共页数
    nowPageSize: 0
}
/* 标签页切换============================================== */
$(`.paySet-lablePage`).on(`click`, `li`, function (e) {
    const key = $(this).text();
    $(`.paySet-lablePage li`).prop(`class`, ``);
    $(this).prop(`class`, `paySet-lablePage-active`);
    switch (key) {
        case `收费项目类别`:
            $(`.pay-project-class`).hide();
            $(`#projectClass`).show();
            pageSize = $(`#p_change_pageSize`).val();
            break;
        case `收费项目定义`:
            $(`.pay-project-class`).hide();
            $(`.projetct-definiton`).show();
            pageSize = $(`#D_changeBtn`).val();
            break;
        case `收费标准设置`:
            $(`.pay-project-class`).hide();
            $(`.projetct-paySet`).show();
            pageSize = $(`#S_changeBtn`).val();
            break;
        case `绑定收费标准`:
            $(`.pay-project-class`).hide();
            $(`.projetct-bindingPay`).show();
            break;
        case `自动账单日设置`:
            $(`.pay-project-class`).hide();
            $(`.projetct-statementDate`).show();
            break;

        default:
            break;
    }
})

/*
1.首先会获取小区的ajax 后台需要创造小区的库
2.可以自己定义收费项目
3.可以对自己定义的收费项目 进行定价
4.也可以新增一个大类
    由新增的大类 可以新建渲染定义
    新增 删除 修改
*/


/* 新增的各个需求============================================== */

//点击新增类型
$(`#projectClassAddBtn`).click(function (e) {
    const projectName = prompt(`请输入新增的项目`);
    if (projectName === null) {
        return
    } else if (projectName.length === 0) {
        return alert(`不能为空`);
    }
    ajax({
        url: `/payTime/addProject`,
        type: `POST`,
        data: {
            projectName
        },
        success(res) {
            // console.log(`前端返回的新增项目结果`, res);
            if (res.code == 200) {
                searchData.value = ""
                showProjectClass();
                alert(`新增成功`);
            } else {
                alert(`类别已有或服务器处理失败`);
            }
        }
    })
})
//确认新增
sureAddBtn(`#PCN_sureBtn`);
function sureAddBtn(sureBtn) {
    $(sureBtn).click(function (e) {
        const payClassName = $(`#payClassName`).val();
        const remark = $(`#PCN_remark`).val();
        const projectName = $(`#definitonModal_select`).val();
        ajax({
            url: `/payClassName/addClassName`,
            type: `POST`,
            data: {
                payClassName,
                projectName,
                remark
            },
            success(res) {
                // console.log(`前端返回的新增项目结果`, res);
                if (res.code == 200) {
                    searchData.value = ""
                    showClassName();
                    alert(`新增成功`);
                } else {
                    alert(`类别已有或服务器处理失败`);
                }
            }
        })
        $(`#definitonModal`).hide();
    })
}
//点击新增项目名称
$(`#definitonAddBtn`).click(function (e) {
    showAllProjectClass();
    $(`#definitonModal`).show();
})
//点击新增标准设置以及对应单价
/* 
1.得到所有的小区数据
2.得到所有的收费项目以及对应的项目类别
3.标准名称为说明 这是什么费用类型
4.单价决定价格
*/
//点击新增
$(`#paySetAddBtn`).click(async function (e) {
    $(`.modalbox-template`).hide();
    $(`#paySetModal`).show();
    showCommunityName(`#commtiy_select`);
    showAllProjectClass();
    searchData.value = $(`#project_setModal`).val();
    // console.log(searchData.value);
    showAllClassName();



})
//确认新增
$(`#paySet_sureBtn`).click(function (e) {

    const communtiyId = $(`#commtiy_select`).val();
    const paySetName = $(`#paySetName`).val();
    const projectName = $(`#project_setModal`).val();
    const payClassName = $(`#setClass_select`).val();
    const paySetPrice = $(`#paySetPrice`).val();
    const MathType = $(`#MathType`).val();
    const chargeNorm = $(`#chargeNorm`).val();

    const data = { communtiyId, paySetName, projectName, payClassName, paySetPrice, MathType, chargeNorm }

    ajax({
        url: `/paySet/addpaySet`,
        type: `POST`,
        data: data,
        success(res) {

            if (res.code == 200) {
                searchData.value = ""
                showAllPaySet()
                // console.log(`前端返回的新增项目标准======》`, res);
                alert(`新增成功`);
            } else {
                alert(`类别已有或服务器处理失败`);
            }
        }
    })
    $(`#paySetModal`).hide();
    // console.log(data);

})
//改变事件
$(`#project_setModal`).change(function (e) {
    const projectName = $(this).val();
    searchData.value = projectName
    showFliterClassName();

})


/* 得到数据============================================== */

//得到筛选的大项目数据
function getProjectClass() {
    return new Promise((resolve, reject) => {
        ajax({
            url: `/payTime/getProject`,
            type: `POST`,
            data: {
                ...searchData,
                nowPage,
                pageSize
            },
            success(res) {
                if (res.code == 200) {
                    total = res.total;//当前的总数据
                    resolve(res);
                    // console.log(`从后端返回的收费项目类型-------------`, res);
                } else {
                    //    alert(`暂无此数据 请先新增`);
                    console.log(`大项目数据库暂无数据请先新增`);
                }
            }
        })
    })
}
//得到筛选的项目名称
function getClassName() {
    return new Promise((resolve, reject) => {
        ajax({
            url: `/payClassName/getClassName`,
            type: `POST`,
            data: {
                ...searchData,
                nowPage,
                pageSize
            },
            success(res) {
                if (res.code == 200) {
                    // total = res.total;//当前的总数据
                    resolve(res);
                    // console.log(`从后端返回的收费项目类型-------------`, res);
                } else {
                    // alert(`数据库暂无数据 请先新增`);
                    console.log(`项目名称数据暂无数据请先新增`);
                }
            }
        })
    })
}
//得到全部的大项目数据
function getAllProjectClass() {
    return new Promise((resolve, reject) => {
        ajax({
            url: `/payTime/getProject`,
            type: `POST`,
            data: {
                cmd: `getAllData`
            },
            success(res) {
                if (res.code == 200) {

                    resolve(res);
                    // console.log(`从后端返回的收费项目类型-------------`, res);
                } else {
                    //    alert(`暂无此数据 请先新增`);
                    console.log(`数据暂无数据请先新增`);
                }
            }
        })
    })
}
//得到所有的小区数据
function getAllgetCommunity() {

    return new Promise((resolve, reject) => {
        ajax({
            url: `/community`,
            type: `GET`,
            data: {
                value: ``
            },
            success(res) {
                if (res.code == 200) {

                    resolve(res);
                    console.log(`从后端返回的所有小区数据-------------`, res);
                } else {
                    //    alert(`暂无此数据 请先新增`);
                    console.log(`数据暂无数据请先新增`);
                }
            }
        })
    })
}
//得到所有的项目名称数据
export function getAllClassName() {

    return new Promise((resolve, reject) => {
        ajax({
            url: `/payClassName/getClassName`,
            type: `POST`,
            data: { cmd: `allClass` },
            success(res) {
                if (res.code == 200) {
                    resolve(res);
                    console.log(`获取到所有的项目名称------`, res);
                } else {
                    alert(`操作失败`);
                }
            }

        })
    })
}
//得到筛选的项目标准
function getFliterPaySet() {
    return new Promise((resolve, reject) => {
        ajax({
            url: `/paySet/getpaySet`,
            type: `POST`,
            data: {
                ...searchData,
                nowPage,
                pageSize
            },
            success(res) {
                if (res.code == 200) {
                    resolve(res);
                    // console.log(`从后端返回的收费项目标准-------------`, res);
                } else {
                    //    alert(`暂无此数据 请先新增`);
                    console.log(`收费标准数据库暂无数据请先新增`);
                }
            }
        })
    })
}
//得到所有的项目标准
export function getAllPaySet() {
    return new Promise((resolve, reject) => {
        ajax({
            url: `/paySet/getpaySet`,
            type: `POST`,
            data: {
                ...searchData,
                nowPage,
                pageSize,
                cmd: `allData`
            },
            success(res) {
                if (res.code == 200) {
                    resolve(res);
                    console.log(`从后端返回的收费项目标准-------------`, res);
                } else {
                    //    alert(`暂无此数据 请先新增`);
                    console.log(`收费标准数据库暂无数据请先新增`);
                }
            }
        })
    })
}
/* 渲染数据============================================== */

//渲染下拉框
export function renderSelect(res, tag = `.definitonModal_select`) {
    const projectData = res.data
    const option = projectData.map(item => {
        return `<option value="${item.projectName}">${item.projectName}</option>`
    }).join(``);
    $(tag).html(option);

}
//渲染新增项目标准下拉框---项目名称
function renderSetSelect(res, tag = `#setClass_select`) {
    const projectData = res.data
    const option = projectData.map(item => {
        return `<option value="${item.payClassName}">${item.payClassName}</option>`
    }).join(``);
    $(tag).html(option);

}
//渲染项目类别
function renderProject(res) {
    const projectData = res.data
    const html = projectData.map(item => {
        return `
    <tr>
      <td>
      <input type="checkbox" name="" id="">
      </td>
      <td>${item.projectName}</td>
        <td>${item.remark ? item.remark : `暂无`}</td>
        <td>
        <span  data-id="${item._id}">编辑</span>
         <span  data-id="${item._id}">删除</span>
       </td>
    </tr>`
    }).join(``);
    $(`#projectClass-data`).html(html);

    pages = res.pages;//当前的总页数
    let li = ``;
    for (let i = 1; i <= pages; i++) {
        li = li + `<li>${i}</li>`
    }
    $(`#projectPages`).html(li);



}
//渲染项目名称
function renderClassName(res, trTag, liTag) {
    const projectData = res.data
    // console.log(`准备渲染的数据============`, projectData);
    const html = projectData.map(item => {
        return `
    <tr>
      <td>
      <input type="checkbox" name="" id="">
      </td>
      <td>${item.payClassName}</td>
      <td>${item.projectName}</td>
        <td>${item.remark ? item.remark : `暂无`}</td>
        <td>
        <span  data-id="${item._id}">编辑</span>
         <span  data-id="${item._id}">删除</span>
       </td>
    </tr>`
    }).join(``);
    $(trTag).html(html);

    pages = res.pages;//当前的总页数
    let li = ``;
    for (let i = 1; i <= pages; i++) {
        li = li + `<li>${i}</li>`
    }
    $(liTag).html(li);



}
//渲染模态框
function renderModalLi(tag, cmd) {
    const AllLi = $(tag);
    const liCount = AllLi.length;

    let liCtn = ``
    $(`#templateModal ul li`).remove();
    if (cmd) {
        $(`#templateModal h4`).text(`修改收费项目定义`)
        for (let i = 1; i < liCount - 1; i++) {
            if (AllLi.eq(i).html().trim() == `收费项目类别`) {
                liCtn += ` <li>
                            <label for="">${AllLi.eq(i).html()}:</label>
                            <select name="" class="definitonModal_select" value="">

                            </select>
                        </li>`
            } else {
                liCtn += ` <li>
                            <label for="">${AllLi.eq(i).html()}:</label>
                            <input type="text">
                        </li>`
            }
        }
        liCtn = `<li>
                    <label for="">ID:</label>
                    <input type="text" disabled>
                </li>`+ liCtn
    } else {
        for (let i = 1; i < liCount - 1; i++) {
            liCtn += ` <li>
                            <label for="">${AllLi.eq(i).html()}:</label>
                            <input type="text">
                        </li>`
        }
        liCtn = `<li>
                            <label for="">ID:</label>
                            <input type="text" disabled>
                        </li>`+ liCtn
    }


    $(`#templateModal ul`).html(liCtn)
    showAllProjectClass()

}
//渲染收费标准下拉框---项目类别
function renderPaySetSelect(data, tag) {
    if (data) {
        const option = data.map(item => {
            return `<option value="${item._id}">${item.communityName}</option>`
        }).join(``)
        $(tag).html(option);
    } else {
        alert(`暂时没有小区数据 请新增`)
    }


}
//渲染收费标准表格
function renderPaySet(res) {
    const data = res.data;
    const html = data.map(item => {
        return `<tr>
            <td><input type="checkbox" name="payset" value="${item._id}"></td>
            <td>${item.communtiyId ? item.communtiyId.communityName : `*该小区已被删除*`}</td>
            <td>${item.payClassName}</td>
            <td>${item.paySetName}</td>
            <td>${item.projectName}</td>
            <td>单价x计量方式</td>
            <td>${item.paySetPrice}</td>
            <td>${item.MathType}</td>
            <td>指定金额</td>
            <td>${item.chargeNorm}</td>
            <td>备注</td>
        </tr>`
    }).join(``)
    $(`#paySet_data`).html(html);

    pages = res.pages;//当前的总页数
    let li = ``;
    for (let i = 1; i <= pages; i++) {
        li = li + `<li>${i}</li>`
    }
    $(`#paySet_ul`).html(li);
}

/* 展示数据============================================== */
showProjectClass();
showClassName();
showPaySet();
//展示收费标准表格
async function showPaySet() {
    const res = await getFliterPaySet();
    renderPaySet(res);
    $(`#paySet_ul li`).prop(`class`, ``);
    $(`#paySet_ul li`).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    nowPageSize = res.data.length;
}
async function showAllPaySet() {
    const res = await getAllPaySet();
    renderPaySet(res);
    $(`#paySet_ul li`).prop(`class`, ``);
    $(`#paySet_ul li`).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    nowPageSize = res.data.length;
}
//展示项目类别 是筛选之后的
async function showProjectClass() {
    const res = await getProjectClass();
    renderProject(res);
    $(`#projectPages li`).prop(`class`, ``);
    $(`#projectPages li`).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    nowPageSize = res.data.length;
}
//展示所有的项目类别
async function showAllProjectClass() {
    const res = await getAllProjectClass();
    renderSelect(res);
}
//展示项目名称
async function showClassName() {
    const res = await getClassName();
    renderClassName(res, `#projetctDefiniton-data`, `#definiton_ul`);
    $(`#definiton_ul li`).prop(`class`, ``);
    $(`#definiton_ul li`).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    nowPageSize = res.data.length;
}
//展示的筛选的下拉框---项目名称
export async function showFliterClassName(tag = `#setClass_select`, renderTag = `#definiton_ul li`) {
    const res = await getClassName();
    renderSetSelect(res, tag);
    $(renderTag).prop(`class`, ``);
    $(renderTag).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    nowPageSize = res.data.length;
}
//展示所有项目名称
export async function showAllClassName(tag = `#definiton_ul li`, renderTag = `#setClass_select`) {
    const res = await getAllClassName();
    renderSetSelect(res, renderTag)
    $(tag).prop(`class`, ``);
    $(tag).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    nowPageSize = res.data.length;
}
//展示所有的小区名字
export async function showCommunityName(tag) {
    const res = await getAllgetCommunity();
    const data = res.result;
    renderPaySetSelect(data, tag)
    // $(`#paySet_ul li`).prop(`class`, ``);
    // $(`#paySet_ul li`).eq(nowPage * 1 - 1).prop(`class`, `pageListActive`);
    // nowPageSize = res.result.length;
}



/* 页码展示============================================== */

//上一页
clickPrevious(`#p_previousPageBtn`, showProjectClass)
clickPrevious(`#D_previousPageBtn`, showClassName)
clickPrevious(`#S_previousPageBtn`, showPaySet)

export function clickPrevious(prevoiusBtn, renderFoo, checkBtn = `#S_check`) {
    $(prevoiusBtn).click(function (e) {
        if (nowPage > 1) {
            nowPage--
            $(checkBtn).prop(`checked`, false)
            renderFoo()
        }
    })
}

//下一页
clicknext(`#p_nextPageBtn`, showProjectClass)
clicknext(`#D_nextPageBtn`, showClassName)
clicknext(`#S_nextPageBtn`, showPaySet)
export function clicknext(nextBtn, renderFoo, checkBtn = `#S_check`) {
    $(nextBtn).click(function (params) {
        if (nowPage < pages) {
            nowPage++;
            $(checkBtn).prop(`checked`, false)
            renderFoo();
        }
    })
}

//搜索
clickSearch(`#projectClass_search`, `#p_searchInput`, showProjectClass);
clickSearch(`#D_search`, `#D_searchInput`, showClassName);
clickSearch(`#S_search`, `#S_searchInput`, showPaySet);

export function clickSearch(searchBtn, searchInput, renderFoo, checkBtn = `#S_check`) {
    $(searchBtn).on(`click`, function (e) {
        const value = $(searchInput).val();
        searchData.value = value;
        $(checkBtn).prop(`checked`, false)
        renderFoo();
    })
}

//点击页数
clickPages(`#projectPages`, showProjectClass);
clickPages(`#definiton_ul`, showClassName);
clickPages(`#paySet_ul`, showPaySet);
export function clickPages(pagesBtn, renderFoo, checkBtn = `#S_check`) {
    $(pagesBtn).on(`click`, `li`, function (e) {
        nowPage = $(this).text();
        // console.log(nowPage);
        $(checkBtn).prop(`checked`, false)
        renderFoo();
    })
}

//改变每页展示数据
clickPageSize(`#p_change_pageSize`, showProjectClass)
clickPageSize(`#D_changeBtn`, showClassName)
clickPageSize(`#S_changeBtn`, showPaySet)
export function clickPageSize(pagesBtn, renderFoo, checkBtn = `#S_check`) {
    $(pagesBtn).change(function (params) {
        pageSize = $(this).val();
        nowPage = 1;
        $(checkBtn).prop(`checked`, false)
        renderFoo();
    })
}


/* 修改，删除数据============================================== */

let { key, _id, payClassName, projectName, remark } = { key: ``, _id: ``, payClassName: ``, projectName: ``, remark: `` }
//点击编辑项目类别

//封装删除的Ajax
function delAjax(url, data, foo) {
    ajax({
        url: url,
        type: `POST`,
        data: data,
        success(res) {
            if (res.code == 200) {
                foo();
                if (nowPageSize == 1) {
                    nowPage--
                    foo();

                }
                if (res.total == 0) {
                    alert(`数据删完了哦`)
                    location.reload();
                }
            } else {
                alert(`操作失败`);
            }
        }

    })
}
$(`#projectClass-data`).on(`click`, `span`, function (e) {
    key = $(this).text();
    _id = $(this).data(`id`);
    projectName = $(this).parent().parent().children().eq(1).text();
    remark = $(this).parent().parent().children().eq(2).text();
    switch (key) {
        case `编辑`:
            $(`#templateModal`).show();
            renderModalLi(`.projectClass-data thead tr th`);
            $(`.model-ul li:nth-child(1) input`).val(_id);
            $(`.model-ul li:nth-child(2) input`).val(projectName);
            $(`.model-ul li:nth-child(3) input`).val(remark);
            break;
        case `删除`:
            delAjax(`/payTime/delProject`, { _id }, showProjectClass)
            break;

        default:
            break;
    }
})
//点击编辑项目名称
$(`#projetctDefiniton-data`).on(`click`, `span`, async function (e) {
    key = $(this).text();
    _id = $(this).data(`id`);
    let data = { _id, cmd: `filter` }
    switch (key) {
        case `编辑`:
            renderModalLi(`.projetctDefiniton-data thead tr th`, `changeInput`);
            const res = await sendChangeData(data, showClassName, `/payClassName/changeClassName`);
            const [{ _id: id, payClassName, projectName, remark }] = res.data
            $(`#templateModal`).show();
            $(`.model-ul li:nth-child(1) input`).val(id);
            $(`.model-ul li:nth-child(2) input`).val(payClassName)
            $(`.model-ul li:nth-child(3) select`).val(projectName)
            $(`.model-ul li:nth-child(4) input`).val(remark ? remark : `暂无`);
            break;
        case `删除`:
            data = { _id, cmd: `del` }
            delAjax(`/payClassName/changeClassName`, data, showClassName)
        default:
            break;
    }

})
//点击第一个复选框全选
$(`#S_check`).click(function (e) {
    const res = $(`#S_check`).prop(`checked`)
    if (res) {
        $(`#paySet_data input[type="checkbox"]`).prop(`checked`, true)
    } else {
        $(`#paySet_data input[type="checkbox"]`).prop(`checked`, false)
    }
})
//当点击收费标准删除的时候
$(`#delPaySet`).click(function (e) {
    const input = $(`#paySet_data input[name="payset"]:checked`);
    if (input.length) {
        for (let i = 0; i < input.length; i++) {
            const data = { _id: input[i].defaultValue };
            delAjax(`/paySet/delpaySet`, data, showPaySet);
        }
        alert(`删除成功`);
        $(`#S_check`).prop(`checked`, false)
    } else {
        alert(`请选择删除的数据`)
    }

})


//点击确认修改的时候 发送请求 请求的数据，需要渲染那个页面，请求的接口
function sendChangeData(data, renderFoo, url) {

    return new Promise((resolve, reject) => {
        ajax({
            url: url,
            type: `POST`,
            data: data,
            success(res) {
                if (res.code == 200) {

                    renderFoo();
                    if (nowPageSize == 1) {
                        nowPage--
                        renderFoo();
                    }
                    resolve(res);
                } else {
                    alert(`操作失败`);
                }
            }

        })
    })

}
//点击确认修改的时候 根据传输的命令判断 此时应该改变的是那个页面的数据
async function changeModel(cmd) {

    let data = {}
    switch (cmd) {
        case `changePayClass`:
            _id = tagNum(1)
            projectName = tagNum(3, `select`);
            remark = tagNum(4);
            payClassName = tagNum(2);
            data = {
                _id, projectName, remark, payClassName
            }

            await sendChangeData(data, showClassName, `/payClassName/changeClassName`)
            break;
        case `changeProject`:
            // console.log(`================================================1`);
            _id = tagNum(1)
            projectName = tagNum(2);
            remark = tagNum(3);
            data = {
                _id, projectName, remark
            }
            console.log(data);
            await sendChangeData(data, showProjectClass, `/payTime/changeProject`)
            break;

        default:
            break;
    }


}
function tagNum(num, tag = `input`) {
    return $(`#model-ul li:nth-child(${num}) ${tag}`).val();
}
//点击模态框中的确认修改
$(`#sureBtn`).click(function (e) {
    // console.log(`================================================3`);

    const key = $(`#model-ul li:nth-child(3) label`).text().trim();
    console.log(key, `================================================4`);
    switch (key) {
        case `备注:`:
            // console.log(`================================================2`);
            changeModel(`changeProject`)
            break;
        case `收费项目类别:`:
            changeModel(`changePayClass`);
            break;
        default:
            break;
    }
    $(`#templateModal`).hide();
})




/* 取消模态框展示============================================== */
cancelBtn(`.cancel-btn`);
cancelBtn(`.header-div img`);

function cancelBtn(tag) {
    $(tag).click(function (e) {
        $(`.modalbox-template`).hide();
    })

}

// export default { renderPaySetSelect }













